<template>
	<view class="container" :style="'padding-top:' + (navBar + 20) + 'px'">
		<!-- #ifndef H5 -->
		<TextNavBar title="我的红包"></TextNavBar>
		<!-- #endif -->
		<view class="content"></view>
		<view class="top" :style="'padding-top:' + navBar + 'px'">
			<view class="card">
				<!-- <image mode="aspectFill" class="headimg" :src="userInfo.headimg" /> -->
				<view class="right">
					<view class="name">{{userInfo.name}}</view>
					<navigator url="/pages/myRedpack/pay">
						<view class="right_btn" v-if="btnShow">退 款</view>
					</navigator>
					<view class="bar">
						<view class="item">
							<view class="number">{{userInfo.zhenbeiCoin || 0}}</view>
							<view class="key">可用余额</view>
						</view>
						<!-- <navigator url="/pages/myRedpack/withdrawList?type=0"> -->
						<view class="item">
							<view class="number">{{assetInfo.review || 0}}</view>
							<view class="key">退款中</view>
						</view>
						<!-- </navigator> -->
						<!-- <navigator url="/pages/myRedpack/withdrawList?type=1"> -->
						<view class="item">
							<view class="number">{{assetInfo.pass || 0}}</view>
							<view class="key">已退款</view>
						</view>
						<!-- </navigator> -->
					</view>
				</view>
			</view>
			<view class="tab-bar">
				<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
					:class="{ 'active': currentTab === index }" @click="switchTab(index)">
					{{ tab.name }}
					<view v-if="currentTab === index" class="tab-underline"></view>
				</view>
			</view>
			<view class="title-c" v-if="currentTab === 0">
				<text class="text">镇北币明细：</text>
				<view class="item" :class="{actived: type == 'all'}" @tap="type = 'all'">全部</view>
				<view class="item" :class="{actived: type == 'in'}" @tap="type = 'in'">收入</view>
				<view class="item" :class="{actived: type == 'out'}" @tap="type = 'out'">支出</view>
			</view>

		</view>
		<!-- <uni-scroll-view class="scroll-view" :scroll-y="true" style="height: 430px;" @scrolltolower="onScrollToLower"> -->
		<view class="list" v-if="list.length && currentTab === 0" :style="'padding-top:' + (navBar + 10) + 'px'">
			<view class="list-item" v-for="item in list" :key="item.uuid">
				<view class="list-body">
					<view class="action">
						{{item.description}}
					</view>
					<view class="order-number" v-if="item.orderNumber">
						订单号:{{item.orderNumber}}
					</view>
					<view class="date-time">
						{{item.createdAt}}
					</view>
				</view>
				<view class="right">
					<text class="red" v-if="item.type">+{{item.value}}</text>
					<text class="gray" v-else>-{{item.value}}</text>
				</view>
			</view>
		</view>
		<view class="list" v-if="currentTab === 1" :style="'padding-top:' + (navBar + 10) + 'px'">
			<rich-text :nodes="html"></rich-text>
		</view>
		<!-- </uni-scroll-view> -->

		<!-- <view class="content-box">
			<image class="user-headimg" :src="userInfo.headimg" mode="aspectFill"></image>
			<view class="score">
				我的红包: {{$tool.formatPrice(userInfo.redpack)}}
			</view>
		</view> -->
		<view v-if="!list.length && init" style="height: 60vh;overflow: hidden;">
			<NoData></NoData>
		</view>


		<view class="footer safe-area-bottom">
			<navigator url="/pages/myRedpack/withdraw" class="footer-button" v-if="setting.is_withdraw_enabled">
				<view>
					<text>退款</text>
				</view>
			</navigator>
			<!-- v-if="setting.is_buy_enabled" -->
			<view class="footer-button bg-purple last-btn" v-if="settingRecharge == '1'" @click='pay()'>
				<text>充值</text>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" borderRadius="30px 30px 0 0" :mask-click="false">

			<view class="popup_content">
				<view class="popup_top">
					<i @click="close"></i>
				</view>
				<view class="popup_title">请选择充值金额</view>
				<view class="depositList">
					<span v-for="(tag,tIndex) in moneyList" :key="tIndex" class="el-tag"
						:class="activeIndex == tIndex ? 'active' : ''"
						@click="switchDeposit(tIndex,tag.value)">{{tag.name}}</span>
					<input class="uni-input" focus placeholder="请输入数量" v-model="recharge" v-show="activeIndex == '5'" />
				</view>
				<!-- 	<view class="popup_title">购买镇北币</view>
				<view class="depositList">
					<input class="uni-input" focus placeholder="请输入金额" v-model="recharge" type="number" />
				</view> -->
				<view class="foot_btn_group">
					<view class="foot_btn" @click="rechargePay()">
						充 值
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getRedpackRecord
	} from "../../api/user.js"
	import {
		$getStorage,
		$setStorage,
		$removeStorage
	} from "@/utils/auth.js";
	export default {
		components: {},
		data() {
			return {
				list: [],
				total: 0,
				page: 1,
				per_page: 20,
				totalPage: null,
				init: false,
				loading: false,
				type: 'all',
				setting: {

				},
				assetInfo: {},
				recharge: "",
				currentTab: 0, // 默认选中第一个Tab
				tabs: [{
					name: '镇北币明细'
				}, {
					name: "镇北币说明"
				}],
				html: ``,
				// 充值金额
				moneyList: [
					// {
					// 	name: "全部",
					// 	value: "all"
					// },
					{
						name: "￥50.00",
						value: "50"
					},
					{
						name: "￥100.00",
						value: "100"
					},
					{
						name: "￥200.00",
						value: "200"
					},
					{
						name: "￥500.00",
						value: "500"
					},
					{
						name: "￥1000.00",
						value: "1000"
					},
					{
						name: "输入自定义金额",
						value: "zdy"
					},
				],
				activeIndex: 0, //提现选择的下标
				// 选择的晶石数量
				number: 50,
				// 自定义数量
				recharge: null,
				btnShow:true,
				settingRecharge:null
			}
		},
		computed: {
			navBar() {
				// #ifdef H5
				return 0
				// #endif
				return this.$store.getters.deviceInfo.customBar
			},
			userInfo() {
				return this.$store.getters.userInfo
			}
		},
		watch: {
			type() {
				this.refresh()
			}
		},
		async onLoad() {
			uni.showLoading({
				title: '加载中'
			})
			this.getRedpackRecord().then(res => {
				uni.hideLoading()
			})

			// this.getSetting()

			this.$store.dispatch("getUserInfo")
		},
		onShow() {
			this.withdrawValue();
			this.selectById();
			this.getWithdrawSettings();
			this.rechargeSettings();
			// this.$http('/assets/redpack').then(res => {
			// 	this.assetInfo = res.data.info
			// })
		},
		onReachBottom() {
			this.page++;
			this.getRedpackRecord()
		},
		methods: {
			// 充值是否显示
			rechargeSettings(){
				this.$http('/setting/recharge_settings/query', 'GET').then(res => {
					this.settingRecharge = res.data
				})
			},
			// 提现是否显示
			getWithdrawSettings(){
				this.$http('/admin-api/withdraw/getWithdrawSettings', 'GET').then(res => {
					this.btnShow = res.data
				})
			},
			// 切换选择的提现额度
			switchDeposit(index, value) {
				this.activeIndex = index
				this.number = value
			},
			selectById() {
				this.$http('/admin-api/selectById', 'GET', {
					id: 5
				}).then(res => {
					this.html = res.content
				})
			},
			// 切换tab
			switchTab(index) {
				this.currentTab = index;
			},
			// 提现查询
			withdrawValue() {
				this.$http('/withdraw-records/balance/withdraw/value', 'GET', {
					userId: this.userInfo.id
				}).then(res => {
					this.assetInfo = res.data
				})
			},
			onScrollToLower() {
				console.log(this.page);
				// 当滚动到底部时触发加载更多逻辑
				if (this.page < this.totalPage) {
					this.page++;
					this.getRedpackRecord();
				}
			},
			getRedpackRecord() {
				// return await getRedpackRecord({
				// 	page: this.page,
				// 	per_page: this.per_page
				// })
				if (this.loading) return
				this.loading = true
				return this.$http('/asset-records/zhenbei_coin', 'GET', {
					type: this.type,
					page: this.page,
					per_page: this.per_page
				}).then(res => {
					// this.page++
					this.totalPage = res.data.page_total
					this.list.push(...res.data.list)
					this.loading = false
					this.init = true
				})
			},
			// getSetting() {
			// 	return this.$http('/setting/redpack', 'GET').then(res => {
			// 		this.setting = res.data.setting
			// 	})
			// },
			refresh() {
				this.page = 1
				this.list = []
				this.getRedpackRecord()
			},
			// 线上充值接口
			pay() {
				this.$refs.popup.open('bottom')
			},
			rechargePay() {
				this.$http("/user/recharge", "get", {
					money: this.recharge ? this.recharge : this.number,
				}).then(res => {
					// 如果没有达到充值上限直接走支付
					if (res.data == 1) {
						this.$http("/pay", "post", {
							type: "wxpay",
							out_trade_no: '',
							name: "镇北币充值",
							money: this.recharge ? this.recharge : this.number,
							return_url: 'http://8.142.124.111:8899/#/pages/myRedpack/index' // 支付成功后跳转的地址，需替换为你的充值页面地址
						}).then(res => {
							if (res.code == 500) {
								uni.showToast({
									title: res.message,
									icon: 'none'
								});
							} else {
								window.location.href = res.message
							}
						})
					} else if (res.message == '您今日充值的金额已经达上限') {
						uni.showModal({
							title: '充值上限',
							content: res.message,
							success: function(res) {
								if (res.confirm) {
									console.log('confirm');
								} else if (res.cancel) {
									console.log('取消');
								}
							}
						});
					} else {
						uni.showModal({
							title: '确定充值',
							content: res.message,
							success: function(res) {
								if (res.confirm) {
									console.log('取消');
								} else if (res.cancel) {
									console.log('取消');
								}
							}
						});
					}
				})

			},
			// 关闭充值弹框
			close() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss">
	page {
		// background: url(../../static/bgColor.png) center/ cover no-repeat;
		// overflow-y: auto;
	}

	.container {
		padding-bottom: 140rpx;
	}

	// 充值
	.depositList {
		padding: 0 30rpx;
		text-align: left;
		display: flex;
		flex-wrap: wrap;
		margin-top: 30rpx;
		margin-bottom: 30rpx;

		.el-tag {
			display: inline-block;
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 36rpx;
			border: 2rpx solid #858585;
			color: #858585;
			border-radius: 10rpx;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
			font-size: 32rpx;
		}

		.active {
			color: #6c43ff;
			border-color: #6c43ff;
		}

		.uni-input {
			width: 310rpx;
			border: 2rpx solid #858585;
			height: 60rpx;
			border-radius: 8rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
		}
	}

	// 充---值====

	.content {
		background: url(../../static/bgColor.png) center/ cover no-repeat;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
	}

	.name {
		color: #fff;
		margin-bottom: 20rpx;
		margin-top: 50rpx;
		font-size: 44rpx;
	}

	.action {
		color: #fff;
		font-size: 35rpx;
	}

	.red {
		background: linear-gradient(70deg, rgb(108, 67, 255), rgb(133, 94, 231));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.gray {
		background: linear-gradient(70deg, #ed2346, #fe6948);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.top {
		background-size: 100% auto;
		background-repeat: no-repeat;

		width: 100%;
		// position: fixed;
		// top: 0rpx;
		// z-index: 10;
		padding-bottom: 10px;
		box-sizing: border-box;

		// box-shadow: 0px 14rpx 30rpx 0px rgba(243, 238, 220, 0.16);
		.card {
			display: flex;
			width: 100%;
			height: 460rpx;
			border-radius: 20rpx;
			background: url(../../static/redpackBg.png) center/ cover no-repeat;
			margin: 20rpx auto;
			padding: 30rpx 90rpx;
			// align-items: center;
			box-sizing: border-box;

			.headimg {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 50rpx;
				border: 10rpx solid 484746;
			}

			.right {
				flex-grow: 1;
				position: relative;

				.right_btn {
					position: absolute;
					right: 0;
					top: 48rpx;
					background-color: #6c43ff;
					display: inline-block;
					height: 64rpx;
					line-height: 64rpx;
					color: #fff;
					padding: 0 40rpx;
					border-radius: 30rpx;
				}

				.bar {
					display: flex;
					justify-content: space-between;
					margin-top: 150rpx;

					.item {
						text-align: center;

						.number {
							font-size: 32rpx;
							font-weight: 800;
							color: #fff;
						}

						.key {
							font-size: 24rpx;
							color: #fff;
							font-weight: 100;
						}
					}
				}
			}
		}

		.tab-bar {
			width: 100%;
			display: flex;
			align-items: center;
			color: #fff;
			justify-content: center;
		}

		.tab-underline {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 120rpx;
			height: 4rpx;
			background-color: #6a0dad;
		}

		.tab-item {
			position: relative;
			padding: 20rpx 80rpx;
			cursor: pointer;
		}

		.tab-item.active {
			font-weight: bold;
			font-size: 35rpx;
		}



		.title-c {
			display: flex;
			align-items: center;
			width: 90%;
			margin: 0 auto;


			.text {
				height: 70upx;
				line-height: 70upx;
				font-size: 34upx;
				font-weight: 500;
				font-size: 35upx;
				font-weight: 100;
				flex-grow: 1;
				color: #fff;
			}

			.item {
				font-size: 26rpx;
				margin-left: 20rpx;
				font-weight: 100;
				color: #fff;
				width: 120rpx;
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
				background: url(../../static/selecticon.png) center/ contain no-repeat;

				&.actived {
					box-sizing: border-box;
					font-weight: 100;
					color: #fff;
					background: url(../../static/btnicon.png) center/ cover no-repeat;
				}
			}
		}
	}

	.list {

		font-weight: 100;
		width: 82%;
		margin: 0 auto;
		background-color: rgb(31, 29, 41);
		border-radius: 20rpx;
		margin-left: 40rpx;
		padding: 30rpx;
		padding-bottom: 20rpx;
		color: white;
		font-size: 33rpx;
		// .item-content {
		// 	margin: 30rpx;
		// }
	}

	.list-item {
		display: flex;
		padding: 24rpx 0;
		border-bottom: 1rpx solid rgb(111, 112, 120);

		.order-number {
			font-size: 26rpx;
			margin-top: 6rpx;
		}

		.date-time {
			font-size: 24upx;
			margin-top: 10upx;
			color: rgb(128, 129, 136);
		}
	}

	.list-body {
		flex: 1;
	}


	.right {
		font-size: 40upx;
		font-weight: 500;
	}


	.footer {
		// display: none;
		position: fixed;
		bottom: 0;
		left: 75rpx;
		width: 100%;
		// background-color: #f5f5f5;
		display: flex;
		width: 600rpx;




		.footer-button {
			margin: 0 auto;
			margin-bottom: 20rpx;
			width: 600rpx;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
			border-radius: 80rpx;
			color: #fff;
			background: rgb(108, 67, 255) !important;
			font-size: 35rpx;

			&.last-btn {
				margin-left: 30rpx;
			}

			// &.bg-purple {
			// 	box-shadow: 0 0 20rpx rgba(81, 81, 149, 0.6);
			// }
		}
	}

	.popup_content {
		background-color: #fff;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		text-align: center;
		padding-bottom: 40rpx;

		.popup_top {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: none;
			position: relative;

			i {
				display: inline-block;
				width: 50rpx;
				height: 50rpx;
				background-color: #cecece;
				border-radius: 25rpx;
				background-image: url(../../static/center/return.png);
				background-repeat: no-repeat;
				background-size: 100%;
				background-position: center;
				overflow: hidden;
				position: absolute;
				right: 30rpx;
			}
		}

		.popup_title {
			padding-top: 40rpx;
			color: #6c43ff;
			font-size: 32rpx;
			padding-bottom: 40rpx;
		}

		// .depositList {
		// 	padding: 0 60rpx;
		// 	margin: 80rpx 0;

		// 	.uni-input {
		// 		border: 2rpx solid #6c43ff;
		// 		height: 90rpx;
		// 		border-radius: 8rpx;
		// 	}
		// }

		.foot_btn_group {
			padding: 0 60rpx;

			.foot_btn {
				height: 80rpx;
				background-color: #6c43ff;
				border-radius: 40rpx;
				color: #fff;
				line-height: 80rpx;
				font-weight: bold;
				font-size: 36rpx;
			}

		}
	}
</style>